<script setup>
import { ref } from "vue"
import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { GetUserInfo, GetUserExpenseInfo } from '../../api/user'






let errimg = new URL('../../assets/img/erricon.png', import.meta.url).href ;

let user_info = ref({
  nickName: '',
  headIcon: ''
})
let expense_info = ref(null)

let availableBalance = ref(0)
let cardsCount = ref(0)
async function get_user_info(token) {
  let params = `?k=7636500`
  let res = await GetUserInfo(params,token)
  if (res.data.status !== 6666){
    user_info.value = res.data.data
    console.log(JSON.stringify(user_info.value))
  }



}

async function get_user_expense_info(token) {
  let params = `?k=9329522`
  let res = await GetUserExpenseInfo(params,token)
  expense_info.value = res.data.data
  console.log(JSON.stringify(expense_info.value))
  availableBalance = res.data.data.availableBalance
  cardsCount = res.data.data.cardsCount

}



function get_token(){
  let token = localStorage.getItem("token")
  if (!!token){
    token=token.replace("\"","").replace("\"","");
  }
  return token
}

const router = useRouter();

let islogin = ref(true)

let gotoItemPage = (url) => {

  router.push(url);

}

let gotoPage = () => {
  if(user_info.value.nickName===''){
    router.push('/login');
  }else{
    router.push('/UpUserInfo');
  }
}

let gotoup = () => {
  router.push('/UpUserInfo');

}

let gotoLogin = () => {
  router.push('/login');

}

let dialog = () => {
  if (!islogin.value) {
    showConfirmDialog({
      message: '该功能需要登录才能使用，确认登录吗？',
      theme: 'round-button',
    }).then(() => {
      console.log("确认")
    })
      .catch(() => {
        console.log("取消")
      });
  }
  else {
    showToast('当前已登录');
  }

}

let UpLoginStatus = () => {
  islogin.value = !islogin.value
  showToast('' + islogin.value)

}

let card_list_data = [
  {
    title: '电影订单',
    lfeticon: new URL('../../assets/img/movieOrder.png', import.meta.url).href,
    righticon: new URL('../../assets/img/jiankuohao.png', import.meta.url).href,
    url: ''
  },
  {
    title: '组合红包',
    lfeticon: new URL('../../assets/img/hongbao.png', import.meta.url).href,
    righticon: new URL('../../assets/img/jiankuohao.png', import.meta.url).href,
    url: ''
  },
  {
    title: '历史记录',
    lfeticon: new URL('../../assets/img/lishijilu.png', import.meta.url).href,
    righticon: new URL('../../assets/img/jiankuohao.png', import.meta.url).href,
    url: ''
  },
  {
    title: '帮助与客服',
    lfeticon: new URL('../../assets/img/bangzhu.png', import.meta.url).href,
    righticon: new URL('../../assets/img/jiankuohao.png', import.meta.url).href,
    url: ''
  },
  {
    title: '设置',
    lfeticon: new URL('../../assets/img/shezhi.png', import.meta.url).href,
    righticon: new URL('../../assets/img/jiankuohao.png', import.meta.url).href,
    url: '/UserSettings'
  },

]
get_user_info()
get_user_expense_info()

onMounted(() => {
  let token = get_token()
  get_user_info(token)
  get_user_expense_info(token)
});

</script>

<template>
  <div class="my-body">
    <div class="center-view">
      <div class="avatar" >
        <img :src="user_info.headIcon!=''?user_info.headIcon:errimg" :onerror="errimg"  class="avator-icon" @click="gotoPage">
        <div class="nick-name" @click="gotoPage">
          {{ user_info.nickName!='' ? user_info.nickName : '立即登录' }}
        </div>
      </div>
      <ul class="my-order-tab">
        <li>
          <div class="value">{{ cardsCount }}</div>
          <div class="label">卖座券</div>
        </li>
        <li>
          <div class="value">
            <span class="price-decimal price-fmt">
              <i>￥</i>
              <span class="interge">
                {{ availableBalance }}
              </span>
            </span>
          </div>
          <div class="label">余额</div>
        </li>
      </ul><!---->
      <div class="margin-set my-card" v-for="(item, index) in card_list_data" :key="index" @click="gotoItemPage(item.url)">
        <img :src="item.lfeticon" width="20px" height="20px" alt="">
        <span class="label">{{ item.title }}</span>
        <img :src="item.righticon" alt="" class="arrow">
      </div>
    </div>

  </div>


</template>

<style scoped src="./css/style.css"></style>